const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

// 分离样式代码 mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 代码分析工具
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')

//多线程编辑js文件
const HappyPack = require('happypack')

function resolve(src) {
  return path.resolve(__dirname, src)
}

//判断模式
const NODE_ENV = process.env.NODE_ENV
console.log(NODE_ENV);

//生产 & 开发公用代码
module.exports = {
  // 入口
  entry: {
    'main': path.resolve(__dirname, '../src/main.js')
  },
  // 出口
  output: {
    // 先清空dist文件夹
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, '../dist'),
    clean: true,
  },
  // 模块
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: [{
          loader: 'babel-loader',
          options: {
            // 缓存
            cacheDirectory: true
          }
        }],
        exclude: /node_modules/
      },
      // 使用style-loader 渲染到dom树中
      // {
      //   test: /\.(css|scss)$/,
      //   use: ['style-loader', 'css-loader', 'sass-loader']
      // },
      // {
      //   test: /\.less$/,
      //   use: ['style-loader', 'css-loader', 'less-loader']
      // }
      // 分离代码 到单独的.css文件
      {
        test: /\.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', {
          loader: 'less-loader',
          options: {
            lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
               modifyVars: {
                 'primary-color': '#1DA57A',
                 'link-color': '#1DA57A',
                 'border-radius-base': '2px',
               },
               javascriptEnabled: true,
             },
           },
        }]
      },
      // 图片的处理
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: 'asset/resource'
      }
    ]
  },
  //插件
  plugins: [
    new HtmlWebpackPlugin({
			template: path.resolve(__dirname, '../public/index.html'),
			title: 'Hello',
			filename: 'index.html',
			minify: false
		}),
    new MiniCssExtractPlugin({
      attributes: {
        id: 'target',
        'data-target': 'example',
      },
			filename: 'index.[chunkhash].css'
    }),
    //进度条
    new webpack.ProgressPlugin(),
    // 代码分析工具
    new BundleAnalyzerPlugin({
      analyzerPort: 8888,
      openAnalyzer: false
    }),
    // 多线程babel-loader编译
    // new HappyPack({
    // 	loaders: ['babel-loader'],
		// 	threads: 3
  	// })
  ],
  resolve: { 
    alias: { //起别名
      '@': resolve('../src')
    },
    extensions: ['.js','.jsx','.vue','.ts', 'json']
  }

}